<template>
  <div ref="viewerContainer"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';

const props = defineProps({
  images: {
    type: Array as () => string[],
    required: true
  }
});

const viewerContainer = ref(null);
let viewerInstance = null;

onMounted(() => {
  nextTick(() => {
    if (viewerContainer.value) {
      // 创建图片元素
      const imgElements = props.images.map(src => {
        const img = document.createElement('img');
        img.src = src;
        return img;
      });

      // 将图片添加到容器
      imgElements.forEach(img => viewerContainer.value.appendChild(img));

      // 初始化Viewer
      viewerInstance = new Viewer(viewerContainer.value, {
        inline: false,
        button: true,
        navbar: true,
        title: false,
        toolbar: {
          zoomIn: 1,
          zoomOut: 1,
          oneToOne: 1,
          reset: 1,
          prev: 1,
          play: 0,
          next: 1,
          rotateLeft: 1,
          rotateRight: 1,
          flipHorizontal: 1,
          flipVertical: 1,
        }
      });
    }
  });
});

onBeforeUnmount(() => {
  if (viewerInstance) {
    viewerInstance.destroy();
  }
});

defineExpose({
  show: (index = 0) => {
    if (viewerInstance) {
      viewerInstance.view(index);
    }
  }
});
</script>

<style scoped>
[hidden] {
  display: none;
}
</style> 